<template>
  <div>
    <manage-page
      :basePath="basePath"
      :conditionLayout="2"
      :customTable="false"
      addButtonHandler="editDialogOpen"
      :doubleClickModify="false"
      modifyButtonHandler="editDialogOpen"
      :rightButton3="bindUserButton"
      @handleCurrentChange="handleCurrentChange"
      @handleQueryData="handleQueryData"
      @rightButton3Handler="handleUserBindButton"
      ref="examTable"
    >
      <span slot="custom-table">替换table</span>
    </manage-page>
    <relation-page
      :basePath="bindUserBasePath"
      :conditionLayout="2"
      :customTable="false"
      :masterCurrentRow="currentRow"
      ref="bindUserDialog"
      title="用户"
    >
    </relation-page>
  </div>
</template>
<script>
import managePage from '@/components/ManagePage'
import relationPage from '@/components/RelationPage'
export default {
  data() {
    return {
      basePath: 'portal/role',
      bindUserBasePath: '/role/user/relation',
      currentRow: null,
      bindUserButton: {
        show: true,
        disabled: true,
        type: 'primary',
        name: '角色绑定',
        icon: ''
      }
    }
  },
  components: {
    managePage,
    relationPage
  },
  methods: {
    handleCurrentChange(current, old) {
      this.currentRow = current
      console.log(this.currentRow)
    },
    handleQueryData(data) {
      this.currentRow = null
    },
    handleUserBindButton () {
      const blockBindEdit = this.currentRow === null
      this.$refs.bindUserDialog.setBindDialogVisible(true, blockBindEdit)
    }
  },
  watch: {
    currentRow: {
      handler(newValue, oldValue) {
        this.bindUserButton.disabled = (newValue === null)
      },
      deep: true
    }
  }
}
</script>
